import React from 'react'
import * as echarts from 'echarts'
import { Layout ,Table} from 'antd'
import {UsergroupAddOutlined , ShoppingCartOutlined , RiseOutlined} from '@ant-design/icons';
import {chartopt} from '../../../chars/index'
import { useEffect } from 'react';

const { Header, Content, Sider } = Layout;
const dataSource = [
    {
      key: '1',
      name: '总量',
      a: 0,
      b:0,
      c: 0,
      d:0,
    },
    {
      key: '2',
      name: '昨日',
      a: 0,
      b:0,
      c: 0,
      d:0,  
    },
  ];
  
  const columns = [
    {
    //   title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '课程访问量   ',
      dataIndex: 'a',
      key: 'a',
    },
    {
      title: '课程购买量',
      dataIndex: 'b',
      key: 'b',
    },
    {
      title: '听课人数',
      dataIndex: 'c',
      key: 'c',
    },
    {
      title:'机构数',
      dataIndex: 'd',
      key: 'd',
    },
  ];
  
const Func = () => {
  useEffect(()=>{
  const myChart1 = echarts.init(document.querySelector('.bar1'))
  myChart1.setOption(chartopt)
  },[])
return <Content className="site-layout-background" style={{padding:' 10px 120px',height: '100%',background: '#f5f5f5'}}>
        <div className='call'>
            <div className='call-box'>
                <span className='call-icon'>
                     <RiseOutlined/>
                </span>
                <span>0</span>
                <span>今日访问量</span>
            </div>
            <div className='call-box'>
                <span className='call-icon' style={{'background': '#ff7382'}}>
                    <UsergroupAddOutlined/>
                </span>
                <span>0</span>
                <span>新增用户量</span>
            </div>
            <div className='call-box'>
                <span className='call-icon'style={{'background': '#00cca2'}}>
                     <ShoppingCartOutlined/>
                </span>
                <span>0</span>
                <span>今日购买量</span>
            </div>
            <div className='tab'>
                <Table size='small' pagination={false} dataSource={dataSource} columns={columns} />
            </div>
        </div>
        <div className='chart'>
            <div className='chart-top'>
                <div className='chart-tab'>
                    <span>在线听课人数</span>
                    <span>课程购买量</span>
                    <span>课程访问量</span>
                </div>
                <div className='chart-date'>
                    <div className='chart-day'>
                        <span>按周</span>
                        <span>按月</span>
                        <span>按年</span>
                    </div>
                    <div>日期空间</div>
                </div>
            </div>
            <div className='bar1 pannel'>图表切换</div>
        </div>
    </Content>

};
export default Func